<include file="User/Home/View/default/header.html" />
<link rel="stylesheet" type="text/css" href="/Public/Home/style/member/v.1.8.1195/easyui/themes/sunny/easyui.css" />
<link rel="stylesheet" type="text/css" href="/Public/Home/style/member/css/icon.css" />
<link rel="stylesheet" type="text/css" href="/Public/Home/style/member/css/common.css" />
<link rel="stylesheet" type="text/css" href="/Public/Home/style/member/css/tickets.css" />
<link rel="stylesheet" type="text/css" href="/Public/Home/style/member/css/fileuploader.css" />
<script src="/Public/Home/style/member/v.1.8.1195/usr_notice.js" type="text/javascript"></script>
<script src="/Public/Home/style/member/v.1.8.1195/common.js" type="text/javascript"></script>
<script src="/Public/Home/style/member/v.1.8.1195/tickets.js" type="text/javascript"></script>
<script src="/Public/Home/style/member/js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="/Public/Home/style/member/js/jquery.fileupload.js" type="text/javascript"></script>

<div region="center" title="Your tickets">
		<div class="easyui-layout" fit="true">
			<div region="west" split="true" style="width: 320px; padding: 2px; padding-top: 10px;">
				<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="ShowAddTicketForm(); return false;">Create</a>
				<div id="ticket_list">
					</div>
			<div id="ticket_pagination"></div>
		</div>
		<div region="center">
			<div style="padding: 10px;" id='ticket_view'>
				</div>
		<div id='add_comment_link' class='hide'>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="ShowAddMessageForm(); return false;">Add comment</a>
		</div>
		<div id='ticket_closed_text' style="padding: 10px; text-align: center;"></div>
		<form action='' method="post" id='form_reply' class='hide'>
			<textarea id="msg_reply"></textarea>
			<br>
			<div id="add_ticket_comment_files" name="new_ticket_comment"></div>
			<div class='clear'></div>
			<a href="#" class="easyui-linkbutton" iconCls="icon-save" hotkey="Ctrl + Enter" onclick="AddMessageInTicket(); return false;">Save</a>
			<a href="#" class="easyui-linkbutton ico_cancel" iconCls="icon-cancel" onclick="HideAddMessageForm(); return false;">Cancel</a>
		</form>
	</div>
	</div>
	</div>

	<div id="ticket_add_pref" style="dislay: none; padding: 30px; overflow: auto; height: 550px;">
		<div
			style="padding-top: 20px; padding-bottom: 20px; text-align: center;">
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="$('#ticket_add_pref').dialog('close'); ShowAddTicketForm(); return false;" id="ticket_button_next"><label class="translate">Create</label></a>
				<span class="timeLeft" style="padding: 5px 10px; color: gray;"></span>
		</div>
	</div>
	<div id="ticket_add" iconCls="icon-add" style="display: none; padding-bottom: 30px; overflow: auto; height: 550px;">
		<form id="ticket_add_form" >
			<input type="hidden" name="a" value="add_new_ticket">
			<table align="center" width="100%" style="font-size: 12px;">
				<tr>
					<th colspan="4" style="padding-top: 20px; padding-bottom: 10px;" class='translate'>ticket_create_info</th>
				</tr>
				<tr>
					<td align="right"><span class="translate">Excase</span> *</td>
					<td align="left" colspan="3">
					<select id="excases" name="e" style="width: 520px;">
					</select></td>
				</tr>
				<tr>
					<td align="right"><span class="translate">Title</span> *</td>
					<td align="left" colspan="3">
					<input type="text" name="t" required="true" id='ticket_new_title' onkeyup="if ($(this).val().trim() != '') { $(this).removeClass('error'); }" style="width: 520px;" />
					</td>
				</tr>
				<tr>
					<td align="right" valign="top" nowrap><span class="translate">Your message</span> *</td>
					<td align="left" colspan="3">
					<textarea name="m" id="message" onkeyup="if ($(this).val().trim() != '') { $(this).removeClass('error'); }" style="height: 150px; width: 520px;"></textarea>
					</td>
				</tr>
			</table>
			<div id="newUploadmsg3" style="width: 500px; display: inline;"></div>
		</form>
			<table>
				<tr>
					<td align="left" colspan="3" style="margin-left: 20px;">
					<div id="add_ticket_files" name="new_ticket">
							<div class="qq-uploader">
								<div class="qq-upload-drop-area" style="display: none;">
									<span>Drop files here to upload</span>
								</div>
								<div class="qq-upload-button" style="position: relative; overflow: hidden; direction: ltr;display: none;">
									<span style="font-size:12px;">选择文件</span>
									<input id="basicfileinput" type="file" name="attach" multiple style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;" />
								</div>
								<ul class="qq-upload-list"></ul>
							</div>
						</div>
						<div id="newUpload3" style="width: 500px; display: inline;"></div>
					</td>
				</tr>
				<tr></tr>
			</table>
	</div>
	<div id="ticket_add_buttons" style="display: none;">
		<a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="CreateTicket(); return false;">Save</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="HideAddTicketForm(); return false;">Close</a>
	</div>
</body>
	</html>
<script type="text/javascript">
$(function () {
	var type= 'tickets';
	var myData = new Date();
	var times = myData.getTime();
	var sub = window.location.host.split(".")[1];
	 $('#basicfileinput').fileupload({
		 autoUpload: true,
	     url: pic_server+times+"&sub="+sub,
	     dataType: 'json',
	     formData:{type : type},
	     add: function(e,data){
	    	 var acceptFileTypes = /^image\/(gif|jpe?g|png|ipe?g|bmp|tif?f)$/i;
	    	 if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])){
	    		 alert('File has an invalid extension,it should be one of gif,jpg,png,jpeg,ipeg,ipg,bmp,tif,tiff');
	    		 return;
	    	 }
	    	 if(data.originalFiles[0]['size'] > 2048000) {
	    		 alert('File is too big');
	             return;
	         }
	    	 var html = '<li><span class="qq-upload-file">'+data.files[0].name+'</span>'
		 		+'<span class="qq-upload-spinner"></span>'
		 		+'<span class="qq-upload-size" style="display: inline;"></span>'
		 		+'<a class="qq-upload-cancel" href="#">cancel</a><br>'
		 		+'<span class="qq-upload-delete" style="display: none;"><a href="#">delete</a></span><span class="qq-upload-failed-text">Failed</span>'
		 		+'</li>';
		 		$('.qq-upload-list').append(html)
		 		data.submit();
	     },
	     success: function (e,data) {
	        document.getElementById("newUpload3").innerHTML +='<img style="display: inline;margin-left: 8px;margin-top:5px;" src="" width="100" height="100"/>';
			document.getElementById("newUpload3").lastChild.src=e.pic_url;
			document.getElementById("newUploadmsg3").innerHTML +='<input type="hidden" name="pics" />';
			document.getElementById("newUploadmsg3").lastChild.value=e.pic_url;
			var	total= (e.size/(1024*1024)).toFixed(1);
			$('.qq-upload-list li:last-child .qq-upload-spinner').css('display','none');
			$('.qq-upload-list li:last-child .qq-upload-size').html(total+'MB');
			$('.qq-upload-list li:last-child .qq-upload-cancel').css('display','none');
			$('.qq-upload-list li:last-child .qq-upload-file').html('image/'+e.subffix);
	     },
	     progressall: function (e,data) {
			var progress = parseInt(data.loaded / data.total * 100, 10);
			var	total= (data.total/(1024*1024)).toFixed(1);
			$('.qq-upload-list li:last-child .qq-upload-size').html(progress+'% from '+total+'MB');
	     }
	 });
});
</script>


